<template>
    <section>
        <div class="order-container">
            <div class="order-con">
                <div class="order-con__title">
                    <p>订单编号：{{detailsList.order_sn}}</p>
                    <p>
                        订单状态：
                        <span v-if="detailsList.status === 0">交易完成</span>
                        <span v-else-if="detailsList.status === 1">进行中</span>
                        <span v-else-if="detailsList.status === 2">退款中</span>
                    </p>
                    <p>创建时间：{{detailsList.created_at}}</p>
                    <p>更新时间：{{detailsList.updated_at}}</p>
                </div>
                <div class="table-box">
                    <el-table :data="detailsList.goods" style="width: 100%">
                        <el-table-column :resizable="false" label="商品信息" prop="name">
                        </el-table-column>
                        <el-table-column :resizable="false" label="规格" prop="size">
                        </el-table-column>
                        <el-table-column :resizable="false" label="状态">
                            <template slot-scope="scope">
                                <div>
                                    <!--0 交易完成 1 进行中 2 退款中 -->
                                    <span v-if="scope.row.status === 0">交易完成</span>
                                    <span v-else-if="scope.row.status === 1">进行中</span>
                                    <span v-else-if="scope.row.status === 2">退款中</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="单价">
                            <template slot-scope="scope">
                                <span>¥{{scope.row.unit_price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="数量" prop="number">
                        </el-table-column>
                        <el-table-column :resizable="false" label="运费">
                            <template slot-scope="scope">
                                <span>¥{{scope.row.carriage}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="优惠券">
                            <template slot-scope="scope">
                                <span>¥{{scope.row.bonus_price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="商品总价">
                            <template slot-scope="scope">
                                <span>¥{{scope.row.total_price}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
    </section>
</template>

<script>
    export default {
        components: {},
        props: ['detailsList'],
        data() {
            return {
                // detailsList: [],
                // tableLoading: false,
            }
        },
        watch: {
            // detailsList(value){
            //     this.orderList = value
            // },
            // orderList(value){
            //     this.$emit('update:detailsList',value)
            // }
        },
        computed: {},
        mounted() {
            console.log('父组件数据', this.detailsList)
        },
        methods: {}
    }
</script>
<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .order-con__title {
        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }

</style>
<style>

</style>